<template>
  <div class="box" v-loading="load">
    <div class="topNavBar">
      <div class="topNav">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">后台首页</el-breadcrumb-item>
          <el-breadcrumb-item>创建商品</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row>
          <el-button size="mini" @click="backGoodlist()"
            >回到商品列表</el-button
          >
        </el-row>
      </div>
    </div>
    <div class="buttomCont">
      <div class="presentButoon">
        <el-row>
          <el-button type="primary" @click="submit()">提交</el-button>
        </el-row>
      </div>
      <div class="left">
        <span>商品名称</span>
        <span>封面</span>
        <span>商品分类</span>
        <span>商品描述</span>
        <span>商品单位</span>
        <span style="margin-top: 10px">总库存</span>
        <span style="margin-top: 10px">库存预警</span>
        <span style="margin-top: 10px">最低销售价</span>
        <span style="margin-top: 10px">最低原价</span>
        <span>库存显示</span>
        <span>是否上架</span>
        <span>运费模板</span>
      </div>
      <div class="right">
        <el-input v-model="title" placeholder="请输入内容"></el-input>
        <div class="add">
          <el-button type="info" icon="el-icon-plus" circle></el-button>
        </div>
  
          <div class="block">
               <el-select v-model="category_id" placeholder="请选择">
                  <el-option
                    v-for="item in category_list"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
              </el-select>
          </div>
    
        <div class="textsarea" style="margin-top: 10px">
            <el-input
              type="textarea"
              v-model="desc"
              placeholder="选填，商品卖点简述，例如：此款商品美观大方 性价比高 不容错过"
            ></el-input>
        </div>
      
        <el-input v-model="unit" placeholder="请输入商品单位"></el-input>
       
        <div style="margin-top: 15px" class="formList">
          <el-input placeholder="请输入内容" v-model="stock" type="number">
            <template slot="append">件</template>
          </el-input>
        </div>
       <div style="margin-top: 15px" class="formList">
          <el-input
            placeholder="请输入内容"
            v-model="min_stock"
            type="number"
          >
            <template slot="append">件</template>
          </el-input>
        </div>
        <div style="margin-top: 15px" class="formList">
            <el-input
              placeholder="请输入内容"
              v-model="min_price"
              type="number"
            >
              <template slot="append">元</template>
        </el-input>
        </div>
           <div style="margin-top: 15px" class="formList">
          <el-input
            placeholder="请输入内容"
            v-model="min_oprice"
            type="number"
          >
            <template slot="append">元</template>
          </el-input>
        </div>
       <div class="repertory">
               <template>
                <el-radio v-model="stock_display" label="1">是</el-radio>
                <el-radio v-model="stock_display" label="0">否</el-radio>
              </template>
        </div>
        <div class="repertory">
              
                <el-radio border v-model="status"  label="0">下架</el-radio>
                <el-radio border v-model="status"  label="1">上架</el-radio>

                <!-- 上架<input type="checkbox" :checked="status!=0" >
                下架<input type="checkbox" :checked="status==0" > -->
        </div>
  
        <div class="block">
            <el-select v-model="express_id" placeholder="请选择">
                  <el-option
                    v-for="item in express_list"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
            </el-select>
          </div> 


      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
            ck:'',
            title: '',
            category_id: '',
            cover: '',
            desc: '',
            unit: '',
            stock: '',
            min_stock: '',
            stock_display: '',
            min_price:'',
            min_oprice: '',
            ischeck: '',
            status: '',
            express_id:'',
            express_list:[],
            load: false,
            category_list:[]
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    backGoodlist() {
      this.$router.push("/shop/goods");
    },
    submit() {
      console.log(this.status);
      // 判断时要发布 没有id 还是 修改有
      if (this.$route.query.id){
        var url = "http://ceshi5.dishait.cn/admin/goods/"+this.$route.query.id;
        var message = "修改成功";
      }else{
        var url = "http://ceshi5.dishait.cn/admin/goods";
        var message = "发布成功";
      }
      this.axios
        .post(url,
          {
            title: this.title,
            category_id: this.category_id,
            cover: this.cover,
            desc: this.desc,
            unit: this.unit,
            stock: this.stock,
            min_stock: this.min_stock,
            stock_display: Number(this.stock_display),
            min_price: this.min_price,
            min_oprice: this.min_oprice,
            ischeck: this.ischeck,
            status: Number(this.status),
            express_id: this.express_id,
          }
        )
        .then((res) => {
          if(res.data==true){
            this.$message({
              message: message,
              type: 'success'
            });
          }
          this.$router.push("/shop/goods");
        });
      
    },
  },

  mounted() {
    this.load = true;
    if (this.$route.query.id) {
      this.axios
        .get("http://ceshi5.dishait.cn/admin/goods/read/" + this.$route.query.id)
        .then((res) => {
          this.load = false;
          this.category_id = res.data.data.category_id;
          this.title = res.data.data.title;
          this.desc = res.data.data.desc;
          this.unit = res.data.data.unit;
          this.stock = res.data.data.stock;
          this.min_stock = res.data.data.min_stock;
          this.stock_display = res.data.data.stock_display+'';
          this.min_price = res.data.data.min_price;
          this.min_oprice = res.data.data.min_oprice;
          this.ischeck = res.data.data.ischeck;
          this.status = res.data.data.status+'';
          this.express_id = res.data.data.express_id;
          
        });
    }
    this.axios
      .get("http://ceshi5.dishait.cn/admin/goods/create")
      .then((res) => {
        this.load = false;
        this.express_list = res.data.data.express.list;
        this.category_list = res.data.data.cates;
      });
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
}
.topNavBar {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #dadada;
  padding-left: 30px;
}
.topNav {
  width: 300px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 30px;
}
.buttomCont {
  width: 100%;
  height: 820px;
  display: flex;
  padding-left: 30px;
  position: absolute;
  left: 200px;
  padding-bottom: 50px;
}
.left {
  width: 80px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 30px 0 25px 0;
  box-sizing: border-box;
  color: #606266;
  font-size: 14px;
  border-right: 0;
}
.right {
  width: 554px;
  height: 100%;
  box-sizing: border-box;
  padding: 18px 0 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.add {
  width: 42px;
  height: 37px;
  border-radius: 10px;
  margin-top: 10px;
}
.add >>> button {
  border-radius: 4px;
}
.textsarea {
  height: 53px;
}
.formList {
  width: 275px;
  height: 40px;
}
.repertory {
  width: 300px;
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.repertory >>> div {
  display: flex;
}
.presentButoon {
  position: fixed;
  right: 50px;
  bottom: 70px;
}
</style>